<script setup>
import {ref, onMounted, defineEmits} from "vue"
import {getWarehouseList} from "@/apis/warehouse"

const keyWord = ref("")
const warehouseList = ref([])
const searchList = ref([])
const emit = defineEmits(['confirm'])
const current_page = ref(1)

function loadData() {
  getWarehouseList(current_page.value)
      .then(res => {
        const {code, data} = res.data;
        if (code === 1) {
          warehouseList.value = data;
          searchList.value = data;
        }
      })
}

function onScroll() {
  loadData();
}

function onSearch(key) {
  searchList.value = [];
  warehouseList.value.forEach(item => {
    if (item.name.search(key) >= 0 || item.postiton.search(key) >= 0) {
      searchList.value.push(item)
    }
  })
}

function onConfirm(item) {
  emit('confirm', item);
}

onMounted(() => {
  loadData()
})

</script>

<template>
  <div class="p-a">
    <t-search
        v-model="keyWord"
        placeholder="搜索"
        :onChange="onSearch"
    />
  </div>
  <div class="select-list">
    <t-list @scroll="onScroll">
      <t-cell hover v-for="item in searchList" :key="item.id" :title="item.name"
              :description="'位置：'+item.position" @click="onConfirm(item)"></t-cell>
    </t-list>
  </div>
</template>

<style scoped lang="less">
.p-a {
  padding: 12px;
  box-sizing: border-box;
}

.select-list {
  height: 300px;
  overflow: scroll;
}
</style>